<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.current{
				background: yellow;
			}
		</style>
	</head>

	<body>
		<!--
			
			假设现在从后台接受了一段关于访客的信息数据(添加新的访客信息从info里面按照顺序拿取),请实现问题一.gif的效果.
			
		-->
		<button class="add">添加一条新的访客信息</button>
		<button class="del">删除选中</button>
		<button class="sort">从小到大</button>
		<button class="all">一键选中</button>
		<table border="1" cellspacing="0" cellpadding="10">
			<theader>
				<tr>
					<th>序列号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>操作</th>
					<th>选择</th>
				</tr>
			</theader>
			<tbody>
				
			</tbody>
			<tfooter>
				
			</tfooter>
		</table>
		<script type="text/javascript">
			var info = [
					{ name: "胡杭", age: 16 },
					{ name: "胜明", age: 22 },
					{ name: "军毅", age: 21 },
					{ name: "晓华", age: 13 },
					{ name: "盛聪", age: 23 },
					{ name: "侦剑", age: 32 },
					{ name: "红翔", age: 25 },
					{ name: "超维", age: 18 },
					{ name: "士琪", age: 22 },
					{ name: "艳华", age: 20 }
				];
			var add = document.querySelector(".add");
			var del = document.querySelector(".del");
			var sort = document.querySelector(".sort");
			var tb = document.querySelector("tbody");
			var index = 0;
			var all = document.querySelector(".all");			
			add.addEventListener("click",function(){
				tb.innerHTML += "<tr><td>"+(index+1)+"</td>"+"<td>"+info[index].name+"</td>"+"<td>"+info[index].age+"</td>"+"<td><button>删除</button></td>"+"<td><input type='checkbox' /></td></tr>";
				++index>=info.length?index = 0:"";
			})
			del.addEventListener("click",function(){
				var cheakbox_arr = document.querySelectorAll("input");
				for(var i = 0;i<cheakbox_arr.length;i++){
					cheakbox_arr[i].checked?cheakbox_arr[i].parentNode.parentNode.remove():"";
				}
			})
			tb.addEventListener("click",function(e){
				e.target.nodeName == "BUTTON"?e.target.parentNode.parentNode.remove():"";
				e.target.nodeName == "INPUT"?selected(e.target):"";
			})
			var sort_bool = true;
			sort.addEventListener("click",function(){
				var tr_arr = document.querySelectorAll("tr:not(:first-child)");
				var new_arr = [];
				for(var i = 0;i<tr_arr.length;i++){
					new_arr.push(tr_arr[i]);
				}
				if(sort_bool){
					new_arr.sort(function(a,b){
						return a.cells[2].innerText - b.cells[2].innerText;
					})
					sort.innerText = "从大到小";
					sort_bool = false;
				}
				else{
					new_arr.sort(function(a,b){
						return b.cells[2].innerText - a.cells[2].innerText;
					})
					sort.innerText = "从小到大";
					sort_bool = true;
				}
				for(var i = 0;i<new_arr.length;i++){
					tb.appendChild(new_arr[i]);
				}
			})
			var selected_bool = false;
			all.addEventListener("click",function(){
				var cheakbox_arr = document.querySelectorAll("input");
				if(!selected_bool){
					for(var i = 0;i<cheakbox_arr.length;i++){
						cheakbox_arr[i].checked = true;
						selected(cheakbox_arr[i]);
						all.innerText = "一键反选";
						selected_bool = true;
					}
				}
				else{
					for(var i = 0;i<cheakbox_arr.length;i++){
						cheakbox_arr[i].checked = false;
						selected(cheakbox_arr[i]);
						all.innerText = "一键选中";
						selected_bool = false;
					}
				}
			})
			function selected(ele){
				ele.parentNode.parentNode.classList.toggle("current");
			}
		</script>
	</body>
</html>
